<template>
    <div>
      <s-table :data="tableDataOne" :columns="columnsOne" border stripe/>
  <!-- <s-table :data="tableData" :columns="columns" :headerCellStyle="headerCellStyle"/> -->
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {Table as STable,TableColumn as STableColumn} from "../../../packages/table"
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]
const columns = ref([
  {
    title: 'Date1',
    prop: 'date'
  },
  {
    title: 'Delivery Info',
    children: [
        {
        title: 'Name',
        prop: 'name'
      },
      {
    title: 'Address Info',
    children: [
        {
        title: 'State',
        prop: 'state'
      },
        {
        title: 'City',
        prop: 'city'
      },
        {
        title: 'Address',
        prop: 'address'
      },
        {
        title: 'Zip',
        prop: 'zip'
      },
    ]
  },
    ]
  },

]);
const editRow = (row: any) => {
  console.log('editRow', row)
}
const onSelectionChange=(checkedRows: any)=>{
  console.log('checkedRows',checkedRows);
}
const headerCellStyle =({row,column, rowIndex, columnIndex})=>{
    console.log('s',row)
  // console.log('s', column,)
  // console.log('s',rowIndex, columnIndex)
  return{
  color: 'red',
  background: 'yellow',
  fontWeight: 'bold',
  border: '1px solid black',
 }
}
const tableDataOne = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const columnsOne = ref([
  {
    title: '日期',
    prop: 'date'
  },
  {
    title: '姓名',
    prop: 'name'
  },
  {
    title: '地址',
    prop: 'address'
  }
]);
</script>

<style lang="scss" scoped>

</style>
